//首页的less样式文件
@import "common";
// @import 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个样式文件引入到html页面里面

body {

	min-width: 320px;
	/* 最小的宽度 */
	max-width: 15rem;
	/* 最大宽度 不必要设置 */
	margin: 0 auto;
	/* 字体样式，不是苹果用后面 的字体 */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: (30rem /@baseFont);
	line-height: 1.5;
	background-color: skyblue;
}



*{
	padding: 0;
	margin: 0;
}

img {
	border: none;
	display: block;
}


ul,p {
	margin: 0;
	padding: 0;
	list-style: none;
}

ol{
	list-style: none;
}

a {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}

li{
	list-style: none;
}


@baseFont: 50;
        #head{
            // height: 80px;
            background-color: rgb(240, 135, 135);
			.search-wrap {
				position: relative;
				 z-index: 3;
				/* flex布局 */
				display: flex;
				// position: fixed;
			
				//文字居中
				// left: 50%;
				// transform: translateX(-50%);
				/* 固定定位必须有宽度*/
				width: 15rem;
				height: (100rem /@baseFont);
				
				background-color: #fff;
				
			
			/* 头像 */
				.search-touxiang {
				/* 相对定位 */
				// position: absolute;
				// top: 0;
				// left: 0;
			
				
				width: (80rem/@baseFont);
				height: (100rem/@baseFont);
				
				/* 头像图 */
				a>span {
					font-size: (70rem/@baseFont);	
					padding-left: (5rem/@baseFont);
					}
			
			
				}
			
			
			/* 搜索框 */
				.search {
				/* 父 */
				position: relative;
				flex: 1;
			
				
				
				.sousuo-box{
					
					height: (100rem/@baseFont);
					
					
				}
				
				span{
					
					position: absolute;
					top: (30rem/@baseFont);
					left: (25rem/@baseFont);
					font-size: (30rem/@baseFont);
				}
				input{
					outline: none;
					
					border: 0;
					height: (66rem/@baseFont);
					
					width: 100%;
					border-radius: (33rem/@baseFont);
					margin: (16rem/@baseFont) (10rem/@baseFont);
					background-color: #dcdcdc;
					font-size: (25rem/@baseFont);
					padding-left: (55rem/@baseFont);
				}
			
			 }
			
			
			/* 最右box */
			 .search-right {
				width: (200rem/@baseFont);
				height: (100rem/@baseFont);
			
			
			 a>span{
				font-size: (70rem/@baseFont);
				padding-left: (20rem/@baseFont);
				// margin-right: (10rem/@baseFont);
				}
				
				}
			
			}
		
		}

/* 文字栏 */


#fixed{
           
            top: 0;
            // left: 0;
            background-color: rgb(240, 238, 111);
            // height: 80px;
            z-index: 4;
        
	#word {
	// position: relative;
	//  z-index: 3;
	position: fixed;
	// margin-top: (100rem /@baseFont);
	background-color: #fff;
	
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (50rem /@baseFont);

	
	.nav {
	display: flex;
	justify-content: space-evenly;
	list-style: none;
	margin: 0 auto;
	// flex-wrap: nowrap;
		/* 默认激活文字 */
		.active>a {
		color: rgb(237, 112, 152);
		}
		.active>a::before{
			visibility: visible;
			color:rgb(237, 112, 152);
			/* 菜单选项中状态默认显示线条 */
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);
			
		}
		
		.nav-item {
		line-height:(45rem /@baseFont);
		font-size: (30rem /@baseFont);
		
		}
		/* 鼠标滑过时候的界面的颜色 */
		.nav-link:hover {
			color: rgb(237, 112, 152);
		}
		
		.nav-link:hover::before{
			visibility: visible;
			background-color: rgb(237, 112, 152);
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);

		}
		.nav-link{
			padding-top: (45px /@baseFont);
			padding-bottom: (45px /@baseFont);
			padding-left: (45px /@baseFont);
			padding-right: (45px/@baseFont);
			color: #000000;
			position: relative;
			opacity: 1 !important;
		}
		.nav-link::before{
			content: "";
			position: absolute;
			width: 100%;
			height: 3px;
			bottom: 0;
			left: 0;
			background-color: rgb(237, 112, 152);
			/*默认设置隐藏*/
			visibility: hidden;
			/*水平方向上尺寸为0*/
			-webkit-transform: scaleX(0);
			-ms-transform: scaleX(0);
			transform: scale(0);
			/*慢入慢出0.1s的效果*/
			-webkit-transition: all 0.1s ease-in-out 0s;
			-o-transition: all 0.1s ease-in-out 0s;
			transition: all 0.1s ease-in-out 0s;
			z-index: -1;
		}
	}

	}

}





#main{
           
            background: linear-gradient(rgb(61, 180, 228),#ddd);/* 渐变 */ 

/* 轮播图 */
.main{

	position: relative;
	width: 15rem;
	height: (380rem/@baseFont);
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	img{
			//设置图片的最大宽度和最大高度
			max-width: 15rem;
		    
	}
}
.left,.right{
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -(60rem/@baseFont);
	width: (35rem/@baseFont);
	height: (70rem/@baseFont);
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: (70rem/@baseFont);
	color: #fff;
	font-size: (30rem/@baseFont);
	z-index:2;
}
.right{
	right: 0;
}
.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.main ul{
	position: absolute;
	left: 0;
	top: 0;
	width: 1000%;
}
.main ul li{
	float:left;
}

ol{
	display: flex;
	width: 60%;
	justify-content: center;
	align-items: center;
	margin-left: (50rem/@baseFont);
}
.circle li {
	
	width: 10%;
	margin-left: (2rem/@baseFont);
	height: (10rem/@baseFont);
	border: 2px solid #D0D0D0;
	// background-color: #D0D0D0;
	/*鼠标经过显示小手*/
	cursor: pointer;
}
.current {
    background-color: rgb(237, 112, 152);
}

.context-two{
	//让中间内容置于最下面！！！
	overflow: hidden;
	
	// position: relative;
	// width: (750rem/@baseFont);
	// margin-top: (400rem/@baseFont);
	//flex-wrap实现弹性盒自动换行
	display: flex;
	// flex-wrap: wrap;
	height: (160rem/@baseFont);
	background-color: #fff;
	.view{
		
		white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
		overflow-y:auto;/*可滑动*/
		width: 15rem;
		display: inline-block;
			
		flex-grow: 1;
		//防止被挤压
		flex-shrink: 0;
	
	}
	
	/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
	.view::-webkit-scrollbar{
	    display: none;
	}
	.xuanfu{

		height:(50rem/@baseFont) ;
		text-align: center;
		//flex-wrap实现弹性盒自动换行
		display: flex;


		width: 100%;
		left: 0;
		li{
		
			width: 50%;
			margin-left: 3%;
			height: (50rem/@baseFont);
			background: #fff;
			display: inline-block;/*行内块元素*/
		
		}

		

		.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
			fill: currentColor;
			}
		svg{
			
			
			font-size: (70rem/@baseFont) ;
		}
	}
}





/*内容3-div左右滑动  */
.context-three {
	//让中间内容置于最下面！！！
	width: (750rem/@baseFont);
	//flex-wrap实现弹性盒自动换行
	display: flex;
	background-color: #fff;
	// overflow: hidden;
	height: (320rem/@baseFont);
	
/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
	 .box::-webkit-scrollbar{
	     display: none;
 }	
.box{
	background: #eee;
	// padding: 10px 0;
	 white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
	 overflow-y:auto;/*可滑动*/	
	 position: relative;
	 // padding-left: (10rem/@baseFont);
	 width: 50%;
	 height: (320rem/@baseFont);
	 background-color: #fff;

	 // overflow: hidden;
	 border-bottom: (5rem/@baseFont) solid #d0d0d0;
	 display: inline-block;
	
	 flex-grow: 1;
	 //防止被挤压
	 flex-shrink: 0;
	 
	 

	 .box1{
		 position: relative;
		 display: flex;
	     width: 50%;
	     margin-left: (5rem/@baseFont);
		
	     background: #DD4A68;
	     display: inline-block;/*行内块元素*/
	 
	 .xuanfu{
		 
			position: absolute;
	 		list-style: none;
	 		text-decoration: none;
	 		display: flex;
	 		width: (325rem/@baseFont);
	 		height:(50rem/@baseFont) ;
	 		
	 		// left: 50%;
	 		//下移！！！
	 		bottom: 0;
	 		width: 100%;
	 		background-color: rgba(195, 188, 188, 0.3);
	 		

	 		li{
				position: relative;
	 			display: flex;
	 			// border-radius:(33rem/@baseFont); 
	 			color: #fff;
				.dujia{
					width: (90rem/@baseFont);
					position: absolute;
					background-color: skyblue;
				
					left:(270rem/@baseFont);
					bottom: (160rem/@baseFont);
					border-radius: 20%;
					
					p{
						text-align: center;
						font-size: (28rem/@baseFont);
					}
				}

	 			.shuzi{
					font-weight: bolder;
					margin-left: (200rem/@baseFont);
	 				margin-top: (250px/@baseFont);
	 				font-size: (25rem/@baseFont);
	 			}
				
				
	 		}
	 		
	 				
	 }
	 	
	 a>img {
	 		
	 		// border-radius:(33rem/@baseFont); 
	 		width:100%;
	 		
	 	
	  }
	 .view-word{
	 	 position: absolute;
	 	 // padding-left: (10rem/@baseFont);
	 	 width: (325rem/@baseFont);
		
	 	 background-color: #fff;
	 	 // border: (10rem/@baseFont) solid yellow;
	 	 display: inline-block;
		 
	 	 flex-grow: 1;
	 	 //防止被挤压
	 	 flex-shrink: 0;
	 	 width: 100%;
	 	
		 
	 	p:nth-child(2){
			font-size: (30rem/@baseFont);
			line-height: (50rem/@baseFont);
			color:rgba(172, 172, 172, 0.8);
			float: left;
			padding-left: (10rem/@baseFont);
			
		}
	 	 p:nth-child(1){	
			
			 /*强制文字在一行文本框内*/
			white-space: nowrap;
			/*溢出部分文字隐藏*/
			overflow: hidden;
			/*溢出部分省略号处理*/
			text-overflow: ellipsis;
	 	    font-size: (30rem/@baseFont);
	 		line-height: (50rem/@baseFont);
	 		color: #000000;
	 		
	 		}
			
	 	 }
		 
	 	 
	 	 }
	 
	 }
	 
	 
	 }
	 
	 /*推荐标签*/
	 .tuijian{
	 		// position: relative;
	 		// z-index: -1;
	 		width: 15rem;
	 		height: (50rem /@baseFont);
	 		background-color: #fff;
	 		
	 		p{
	 			font-weight: bolder;
	 			font-size:(30rem /@baseFont) ;
	 			padding-left: (20rem /@baseFont);
	 		}
	 	}
	 	
	 
	 	 
	.context-four {
	 	//让中间内容置于最下面！！！
	 	
	 
	 	width: (750rem/@baseFont);
	 	//flex-wrap实现弹性盒自动换行
	 	display: flex;
	 	flex-wrap: wrap;
	 
	 	background-color: #fff;
	 	
	 	
	 .view{
	 		
	 	 position: relative;
	 	 // padding-left: (10rem/@baseFont);
	 	 width: (325rem/@baseFont);
	 	 height: (300rem/@baseFont);
	 	 background-color: #fff;
	 
	 	 overflow: hidden;
	 	 border: (10rem/@baseFont) solid #d0d0d0;
	 	 display: inline-block;
	 	
	 	 flex-grow: 1;
	 	 //防止被挤压
	 	 flex-shrink: 0;
	 	 .xuanfu{
	 
	 		position: absolute;
	 		list-style: none;
	 		text-decoration: none;
	 		display: flex;
	 		width: (325rem/@baseFont);
	 		height:(50rem/@baseFont) ;
	 		text-align: center;
	 		left: 0;
	 		//下移！！！
	 		margin-bottom: (90rem/@baseFont);;
	 		bottom: 0;
	 		width: 100%;
	 		
	 		background-color: rgba(195, 188, 188, 0.5);
	 		
	 		li:nth-child(3){
	 			padding-left: (100rem/@baseFont);;
	 			color: #fff;
	 		}
	 		
	 		li{
	 			display: flex;
	 			// border-radius:(33rem/@baseFont); 
	 			color: #fff;
	 			font-weight: bolder;
	 			.dujia{
	 				width: (90rem/@baseFont);
	 				position: absolute;
	 				background-color: skyblue;
	 			
	 				left:(250rem/@baseFont);
	 				bottom: (160rem/@baseFont);
	 				border-radius: 20%;
	 				
	 				p{
	 					text-align: center;
	 					font-size: (28rem/@baseFont);
	 				}
	 				}
	 			.iconfont{
	 				font-size: (40rem/@baseFont);
	 				margin-left: (200px/@baseFont);;
	 				
	 			}
	 			.fanju{
	 				background-color: rgba(118, 118, 118, 0.2);
	 			}
	 			.re{
	 				color: goldenrod;
	 			}
	 			.shuzi{
	 				
	 				margin-top: (250px/@baseFont);
	 				font-size: (25rem/@baseFont);
	 			}
	 		}
	 		
	 				
	 	 }
	 	
	 	 a>img {
	 		
	 		// border-radius:(33rem/@baseFont); 
	 		width:100%;
	 		height: 70%;
	 	
	 	  }
	 	
	 	
	 	 .view-word{
	 	 position: relative;
	 	 // padding-left: (10rem/@baseFont);
	 	 width: (325rem/@baseFont);
	 
	 	 background-color: #fff;
	 	 // border: (10rem/@baseFont) solid yellow;
	 	 display: inline-block;
	 	
	 	 flex-grow: 1;
	 	 //防止被挤压
	 	 flex-shrink: 0;
	 	 width: 100%;
	 	 height: 70%;
	 	
	 	 p{	
	 		
	 		position: absolute;
	 	    font-size: (30rem/@baseFont);
	 		line-height: (50rem/@baseFont);
	 		color: #000000;
	 		text-align: center;
	 		}
	 	 }
	 	 
	 	
	 
	 	 }
	}
}
	/* footer底部 */
	.footer {
		// position: fixed;	
		// /* 固定定位必须有宽度*/
		// width: 15rem;
		// height: (150rem /@baseFont);
		// bottom: 0;
		// background-color: #fff;
		// //文字居中
		// left: 50%;
		// transform: translateX(-50%);
		// overflow: hidden;
		// text-align: center;
		
		position: fixed;
		width: 15rem;
		height: (120rem /@baseFont);
		background-color: #fff;
		// bottom: 0;
		z-index: 3;
		bottom: 0;
		//文字居中
		// left: 50%;
		// transform: translateX(-50%);
		overflow: hidden;
		text-align: center;
		
		.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		/* fill:currentColor是什么意思？ 
				          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
				          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
				           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
		fill: currentColor;
		/*  */
	
		}
		
		#bnav {
		
			/* fixed相对于浏览器窗口进行定位，正常情况下没有问题，当使用transform:translate(0px,-5px);属性后问题就出现了 */
			/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
			display: flex;
		
		 li:nth-child(1) {
			width: 20%;
		}
		
		 li:nth-child(2) {
			width: 20%;
		}
		
		 li:nth-child(3) {
			width: 20%;
		}
		
		 li:nth-child(4) {
			width: 20%;
		}
		
		 li:nth-child(5) {
			width: 20%;
		}
		
		svg {
			font-size: (70rem /@baseFont);
		
		}
		
		p {
			font-size: (14rem /@baseFont);
			line-height: (50rem /@baseFont);
		
		}
		
		 .footer-nav>.icon:hover {
			color: rgb(237, 112, 152);
		}
	
	
		 .active {
			color: rgb(237, 112, 152);
		}
		
		}
		
	
	}
		